<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>23_响应式布局-阈值设值</title>
        <style>
            @media (device-width:1366px) {
                body {
                    background-color: #666;
                }
            }

            /*  - 超小屏幕 <=576px
                - 小屏幕 577px ~ 768px
                - 中等屏幕 769px ~ 992px
                - 大屏幕 993px ~ 1200px
                - 超大屏幕 >1200px
            */
            @media (min-width:1201px){
                body {
                    background-color: red;
                }
            }

            @media (min-width:993px) and (max-width:1200px){
                body {
                    background-color: yellow;
                }
            }

            @media (min-width:769px) and (max-width:992px){
                body {
                    background-color: green;
                }
            }

            @media (min-width:577px) and (max-width:768px){
                body {
                    background-color: skyblue;
                }
            }

            @media (max-width:576px) {
                body {
                    background-color: tomato;
                }
            }


            
        </style>
    </head>
    <body>
        
    </body>
</html>